<template>
	<view class="mPage">
		<!-- <uni-nav-bar leftIcon="left" title="预约详情" statusBar :border="false"
			backgroundColor="linear-gradient( 180deg, #E3F3FF 0%, #F6F6F8 100%)" @clickLeft="handleBack"></uni-nav-bar> -->
		<wCard :borderRadius="16" :marginTop="20">
			<text class="title-time">{{mDetails.order_date}} {{mDetails.order_time}}</text>
			<view style="width: 623rpx;height: 0;border-bottom: 1rpx dashed #DADADA;margin: 0 auto;" />
			<view class="h-view">
				<text>预约单号</text>
				<text>{{mDetails.order_no}}</text>
			</view>
			<view class="h-view">
				<text>预约门店</text>
				<text>{{mDetails.store_name}}</text>
			</view>

			<view class="h-view">
				<text>门店地址</text>
				<text>{{mDetails.address}}</text>
			</view>

			<view class="h-view">
				<text>预约人</text>
				<text>{{mDetails.user_name}}</text>
			</view>

			<view class="h-view">
				<text>预约手机</text>
				<text>{{mDetails.user_phone}}</text>
			</view>

			<view class="h-view">
				<text>预约项目</text>
				<text>洗剪吹</text>
			</view>

			<view class="h-view">
				<text>备注</text>
				<text>{{mDetails.order_remark}}</text>
			</view>
			<view style="height: 40rpx;">

			</view>

		</wCard>
		<wCard :borderRadius="16" :marginTop="20">
			<view class="xts-box">
				<image src="/subpages/static/ic_xts.png" mode="heightFix"></image>
				<text>小贴士</text>
			</view>
			<view style="height: 8rpx;">

			</view>
			<text class="xts-desc">1.预约后可直接取消，不影响您下次预约</text>
			<text class="xts-desc">2.门店有停车场，可凭消费凭证免费停车</text>
			<view style="height: 40rpx;">

			</view>
		</wCard>
		<view class="bottom-btn-view">
			<text class="cancel-btn" @click="handleCancel">取消预约</text>
			<text class="update-btn" @click="handleUpdate">修改预约</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		navigateTo
	} from '@/utils/util.js'

	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	import wCard from '@/components/w-card.vue'

	const code = ref()
	const mDetails = ref({})
	onLoad((options) => {
		console.log("options=>", options);
		code.value = options.code;
		mDetails.value = uni.getStorageSync("tempOrderDetails");
	})


	const handleBack = () => {
		uni.navigateBack()
	}
	const handleCancel = () => {
		uni.navigateBack()
	}
	const handleUpdate = () => {
		navigateTo({
			url: `/subpages/pages/serviceBook/index`
		})
	}
</script>
<style lang="scss" scoped>
	.title-time {
		font-size: 40rpx;
		color: #26A0FF;
		margin: 40rpx 40rpx 30rpx 40rpx;
		font-weight: bold;
	}

	.h-view {
		width: calc(100% - 80rpx);
		display: flex;
		flex-direction: row;
		margin-left: 40rpx;
		margin-top: 40rpx;
		justify-content: space-between;
		font-size: 30rpx;
		color: #242424;
	}

	.xts-box {
		display: flex;
		flex-direction: row;
		margin-top: 28rpx;
		margin-left: 40rpx;
		align-items: center;

		image {
			width: 40rpx;
			height: 32rpx;
		}

		text {
			font-size: 32rpx;
			color: #151515;
			font-weight: 500;
			margin-left: 3rpx;
		}
	}

	.xts-desc {
		font-size: 26rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		color: #666666;
		margin-top: 16rpx;
	}

	.bottom-btn-view {
		position: fixed;
		left: 0;
		right: 0;
		bottom: env(safe-area-inset-bottom);
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;

		.cancel-btn {
			width: 279rpx;
			height: 96rpx;
			background: #F6F6F8;
			border-radius: 48rpx;
			border: 1rpx solid #666666;
			font-weight: 500;
			font-size: 34rpx;
			color: #666666;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			&:active {
				opacity: 0.7;
			}
		}

		.update-btn {
			width: 386rpx;
			height: 96rpx;
			background: #26A0FF;
			font-weight: 500;
			border-radius: 48rpx;
			font-size: 34rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>